<template>
  <div class="tabs-root">
    <div class="my-tabs">
      <el-tabs class="tabs-main" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabsData" :key="index" :label="item.label" :name="item.label">
        </el-tab-pane>
        <!-- <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
      </el-tabs>
    </div>
    <component :is="activeComponents"></component>
  </div>
</template>

<script>
import riskPatrolPlan from '@/views/xy/riskManager/cityRisk/riskPatrolPlan/index';

export default {
  name: "tabs",
  components: {
    riskPatrolPlan,
  },
  props: {
    tabsData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeName: this.tabsData[0].label,
      activeComponents: this.tabsData[0].content,
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      this.activeComponents = this.tabsData[tab.index].content;
    }
  },
};
</script>

<style lang="scss" scoped>
.tabs-root {
  height: 100%;
  display: flex;
  flex-direction: column;
  .my-tabs{
    background-color: transparent;
    flex-shrink: 0;
    .tabs-main{
      padding: 0 10px;
    }
  }
  ::v-deep .el-tabs__nav{
    // padding: 0 20px;
  }
  ::v-deep .el-tabs__header{
    margin: 0;
    background-color: white;
    padding-left: 16px !important;
  }
  ::v-deep .el-tabs__item{
    height: 46px;
    line-height: 46px;
  }
}

</style>
